<template>
  <div>
    App... {{num}}
    <!-- 绑定自定义事件一 -->
    <Child @Xxx="handleXxx" @click.native="handleClick" @setNum="setNum"/>
    
    <!-- 绑定自定义事件：方式二 -->
    <Son ref="sonRef" />
  </div>
</template>

<script>
import Child from "./Child.vue";
import Son from "./Son.vue";

export default {
  name: "App",
  components:{
    Child,
    Son,
  },
  data() {
    return {
      num: 0,
    };
  },
  /* 
  自定义事件   用来子向父通信
    绑定事件：事件名称可以任意的  <Child @事件名="事件回调函数" />
    触发事件：手动触发 this.$emit(事件名称, ...参数)

  给组件绑定的事件，默认都是自定义事件（需要手动触发才能触发）
  绑定事件时加上.native事件修饰符，才会绑定原生DOM事件
  */
  methods:{
    handleXxx(){
      console.log("handleXxx()");
    },
    handleClick(){
      console.log("handleClick");
    },
    setNum() {
      this.num++;
    },
    handleYyy() {
      console.log("handleYyy()");
    },
  },
  /*
    $once 绑定一次性事件
    $on   绑定持续事件
    $off  解绑事件
    $emit 触发事件
  */
  mounted(){
    // 绑定自定义事件
    // this.$refs.sonRef.$on("yyy", this.handleYyy);
    this.$refs.sonRef.$once("yyy", this.handleYyy);
  },
  beforeDestroy() {
    // 解绑自定义事件
    this.$refs.sonRef.$off("yyy", this.handleYyy);
  },
};

</script>

<style></style>